<template>
	<div style="height:3000px">
		<!-- 工单领料 -->
	<v-tabs color="red">
        	<v-tab>
        		查看库位
        	</v-tab>
        	<v-tab>
        		查看仓库
        	</v-tab>
					<v-tab>
						查看库区
					</v-tab>
					<v-tab-item>
						<v-card>
							<v-card-title>
								<v-row >
									<v-col cols="11" >
											<v-row >
												<v-col cols="2" >
													<v-text-field label="库位" v-model="Slocation" placeholder="库位" dense outlined>
													</v-text-field>
												</v-col>
													
												<v-col cols="2" >
													<v-text-field label="容器" v-model="Scontainer" placeholder="容器" dense outlined>
													</v-text-field>
												</v-col>
													
												<!--<v-col cols="1" >
													<v-text-field label="排" v-model="Srownum" placeholder="排" dense outlined>
													</v-text-field>
												</v-col>
												
												<v-col cols="1" >
													<v-text-field label="列" v-model="Scolumnum" placeholder="列" dense outlined>
													</v-text-field>
												</v-col>
												
												<v-col cols="1" >
													<v-text-field label="层" v-model="Slayernum" placeholder="层" dense outlined>
													</v-text-field>
												</v-col>-->
												
												<v-col cols="2">
													<v-select  v-model="flagselect" :items="flagitems"
																		item-text="name"
													          item-value="value"
														outlined dense label="是否可用">
													</v-select>
												</v-col>
												
												<v-col cols="2">
													<v-select  v-model="flagqty" :items="flagisqty"
																		item-text="name"
													          item-value="value"
														outlined dense label="库位占用">
													</v-select>
												</v-col>
												
												<v-col cols="2">
													<v-btn depressed color="primary" @click="searchinfo()" tile>查询</v-btn>
												</v-col>
											</v-row>																												
									</v-col>
									
									<v-col cols="1" align="end">
										<v-btn dark color="blue lighten-3" @click="refreshApps">
											<v-icon dark>mdi-refresh-circle</v-icon>刷新
										</v-btn>
									</v-col>
									
								</v-row>					
							</v-card-title>
							
							<v-alert dense text color="blue-grey"></v-alert>
							
							<v-data-table :headers="HeaderList" :items="DataList" small dense
								fixed-header item-key="id"  class="text-no-wrap" show-select  v-model="selected"
								loading-text="正在加载请稍等......" :loading="Lloading"
								:options.sync="LOrderOptions" :footer-props="vuetifyDefaultPage"
								:server-items-length="LOrderTotalCount">
								<template v-slot:item.isqty="{ item }">
									<v-chip v-if="item.isqty == 0" color="success" small label
										
									>
										空闲
									</v-chip>
									<v-chip v-else color="error" small label
										
									>
										占用
									</v-chip>
								</template>
								<template v-slot:item.enable="{ item }">
									<v-chip v-if="item.enable == 0" color="error" small label
										
									>
										禁用
									</v-chip>
									<v-chip v-else color="success" small label
										
									>
										可用
									</v-chip>
								</template>
								<template v-slot:item.iqty="{ item }">
									<v-chip v-if="item.iqty == 0" color="info" small label
										
									>
										没任务
									</v-chip>
									<v-chip v-else color="success" small label
										
									>
										正在入库
									</v-chip>
								</template>
								<template v-slot:item.oqty="{ item }">
									<v-chip v-if="item.oqty == 0" color="success" small label
										
									>
										没任务
									</v-chip>
									<v-chip v-else color="info" small label
										
									>
										正在出库
									</v-chip>
								</template>
								<template v-slot:item.actions="{ item }">
						      <v-btn tile color="warning" small @click.stop="EditDialog(item)">
										<v-icon left>
											mdi-pencil
										</v-icon>
										编辑
						      </v-btn>
						    </template>
							</v-data-table>
						</v-card>
					</v-tab-item>
					
					<v-tab-item>
						<v-card>
							<v-card-title>
								<v-row >
									<v-col cols="11" >
											<v-row >
												<v-col cols="2" >
													<v-text-field label="仓库" v-model="Wwarehouse" placeholder="仓库" dense outlined>
													</v-text-field>
												</v-col>
													
												<v-col cols="2" >
													<v-text-field label="描述" v-model="Wdescription" placeholder="描述" dense outlined>
													</v-text-field>
												</v-col>
																								
												<v-col cols="2">
													<v-select  v-model="Wflagselect" :items="flagitems"
																		item-text="name"
													          item-value="value"
														outlined dense label="是否可用">
													</v-select>
												</v-col>
												
												<v-col cols="2">
													<v-btn depressed color="primary" @click="searchWarehouseinfo()" tile>查询</v-btn>
												</v-col>
											</v-row>																												
									</v-col>
									
									<v-col cols="1" align="end">
										<v-btn dark color="blue lighten-3" @click="refreshApps">
											<v-icon dark>mdi-refresh-circle</v-icon>刷新
										</v-btn>
									</v-col>
									
								</v-row>					
							</v-card-title>
							
							<v-alert dense text color="blue-grey"></v-alert>
							
							<v-data-table :headers="WarehouseHeaderList" :items="WarehouseDataList" small dense
								fixed-header item-key="id"  class="text-no-wrap"  v-model="Wselected"
								loading-text="正在加载请稍等......" :loading="Wloading"
								:options.sync="WOrderOptions" :footer-props="vuetifyDefaultPage"
								:server-items-length="WOrderTotalCount">
								<template v-slot:item.enable="{ item }">
									<v-chip v-if="item.enable == 0" color="error" small label
										
									>
										禁用
									</v-chip>
									<v-chip v-else color="success" small label
										
									>
										启用
									</v-chip>
								</template>
							</v-data-table>

						</v-card>
					</v-tab-item>
					
					<v-tab-item>
						<v-card>
							<v-card-title>
								<v-row >
									<v-col cols="11" >
											<v-row >
												<v-col cols="2" >
													<v-text-field label="库区" v-model="Zzonecode" placeholder="库区" dense outlined>
													</v-text-field>
												</v-col>
													
												<v-col cols="2" >
													<v-text-field label="描述" v-model="Zdescription" placeholder="描述" dense outlined>
													</v-text-field>
												</v-col>										
												
												<v-col cols="2">
													<v-select  v-model="Zflagselect" :items="flagitems"
																		item-text="name"
													          item-value="value"
														outlined dense label="是否可用">
													</v-select>
												</v-col>
												
												<v-col cols="2">
													<v-btn depressed color="primary" @click="searchZoneinfo()" tile>查询</v-btn>
												</v-col>
											</v-row>																												
									</v-col>
									
									<v-col cols="1" align="end">
										<v-btn dark color="blue lighten-3" @click="refreshApps">
											<v-icon dark>mdi-refresh-circle</v-icon>刷新
										</v-btn>
									</v-col>
									
								</v-row>					
							</v-card-title>
							
							<v-alert dense text color="blue-grey"></v-alert>
							
							<v-data-table :headers="ZoneHeaderList" :items="ZoneDataList" small dense
								fixed-header item-key="id"  class="text-no-wrap"   v-model="Zselected"
								loading-text="正在加载请稍等......" :loading="Zloading"
								:options.sync="ZOrderOptions" :footer-props="vuetifyDefaultPage"
								:server-items-length="ZOrderTotalCount">
								<template v-slot:item.enable="{ item }">
									<v-chip v-if="item.enable == 0" color="error" small label
										
									>
										禁用
									</v-chip>
									<v-chip v-else color="success" small label
										
									>
										启用
									</v-chip>
								</template>
							</v-data-table>
						</v-card>
					</v-tab-item>
		</v-tabs>
			
	
	

		<!-- 对话框 -->
		<v-dialog v-model="AddOrEditDialog" max-width="1000px">
			<v-card>
				<v-card-title class="text-h5">
				  {{DialogHeader}}
				</v-card-title>
				<v-card-text>
				  <div class="mb-12">
				  	<v-row dense>
				  		<v-col cols="12">
				  			<v-row>
									<v-col cols="12">
										<v-text-field label="库位"  disabled 
											v-model="DialogBill.location">
										</v-text-field>
									</v-col>
				  				<v-col cols="6">
				  					<v-text-field label="托盘号"  clearable
				  						v-model="DialogBill.container">
				  					</v-text-field>
				  				</v-col>			  				
									<v-col cols="6">
										<v-select  v-model="DialogBill.isqty" :items="Sisqty"
															item-text="name"
										          item-value="value"
											 label="是否空闲">
										</v-select>
									</v-col>
				  				<v-col cols="6">
										<v-select  v-model="DialogBill.enable" :items="Senable"
															item-text="name"
										          item-value="value"
											 label="是否可用">
										</v-select>
				  				</v-col>
									<v-col cols="6">
										</v-text-field>
										<v-select  v-model="DialogBill.oqty" :items="Soqty"
															item-text="name"
										          item-value="value"
											 label="出库占用">
										</v-select>
									</v-col>
				  			</v-row>
				  		</v-col>
				  	</v-row>
				  </div>
				</v-card-text>
				<v-card-actions>
				  <v-spacer></v-spacer>
					
				  <v-btn
				    color="green darken-1"
				    text
				    @click="confirmOrder()"
				  >
				    提交
				  </v-btn>
					
				  <v-btn
				    color="green darken-1"
				    text
				    @click="AddOrEditDialog = false"
				  >
				    关闭
				  </v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	
	</div>
</template>

<script>
export default {
  name: 'wms_ordercenter_other_out',
  data: () => ({
		  Slocation:'',
			Scontainer:'',
			Srownum:'',
			Scolumnum:'',
			Slayernum:'',
			Wwarehouse:'',
			Wdescription:'',
			Zzonecode:'',
			Zdescription:'',
			flagselect:-1,
			Wflagselect:-1,
			Zflagselect:-1,
			flagqty:-1,
			flagitems:[
				{name: '所有', value:-1},
				{name: '禁用', value:0},
				{name: '可用', value:1},
			],
			flagisqty:[
				{name: '所有', value:-1},
				{name: '占用', value:1},
				{name: '空闲', value:0},
			],
			Sisqty:[
				{name: '空闲', value:0},
				{name: '占用', value:1},
			],
			Senable:[
				{name: '禁用', value:0},
				{name: '可用', value:1},
			],
			Siqty:[
				{name: '没任务', value:0},
				{name: '正在入库', value:1},
			],
			Soqty:[
				{name: '没任务', value:0},
				{name: '正在出库', value:1},
			],
  		searchInput: '',
  		AddOrEditDialog: false,
  		HeaderList: [
  			{ text: '仓库编号',value: 'warehouse'},
  			{ text: '库区编号', value: 'zonecode' },
				{ text: '库位编号', value: 'location' },
				//{ text: '库位名称', value: 'name' },
  			//{ text: '排', value: 'rownum' },
  			//{ text: '列', value: 'columnum' },
  			//{ text: '层', value: 'layernum' },
  			{ text: '托盘号', value: 'container' },
				{ text: '是否空闲', value: 'isqty' },
				{ text: '是否可用', value: 'enable' },
				//{ text: '当前数量', value: 'qty' },
				//{ text: '入库占用', value: 'iqty' },
				{ text: '出库占用', value: 'oqty' },
				{ text: '操作', value: 'actions' },
  		],
			WarehouseHeaderList:[
				{ text: '仓库编号',value: 'warehouse'},
				{ text: '描述', value: 'description' },
				{ text: '是否可用', value: 'enable' },
			],
			ZoneHeaderList:[
				{ text: '仓库编号',value: 'warehouse'},
				{ text: '库区编号',value: 'zonecode'},
				{ text: '描述', value: 'description' },
				{ text: '是否可用', value: 'enable' },
			],
			DialogBill:{
				id:'',
				dbid:'',
				isavailable:true,
				created_by:'',
				created_byname:'',
				updated_by:'',
				updated_byname:'',
				company:'',
				created_time:'',
				updated_time:'',
				accountingbookcode:'',			
				warehouse:'',
				zonecode:'',
				location:'',
				type:1,
				rownum:'',
				columnum:'',
				layernum:'',
				container:'',
				name:'',				
				isqty:0,
				enable:1,
				qty:"",
				iqty:0,
				oqty:0
			},
  		DataList: [],
			WarehouseDataList:[],
			ZoneDataList:[],
			selected:[],
			Wselected:[],
			Zselected:[],
  		checkList: [],
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
			},
  		
			LLoading: false,
  		LOrderTotalCount: 0,
  		LOrderOptions: {
  			//页数
  			page: 1,
  			//每页行数
  			itemsPerPage: 10
  		},
			WLoading: false,
			WOrderTotalCount: 0,
			WOrderOptions: {
				//页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			ZLoading: false,
			ZOrderTotalCount: 0,
			ZOrderOptions: {
				//页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			
			DialogHeader:"",
  		leftCheckMaterialValid: false,
  		//领料单 表单信息
  		leftMaterialRequestOrderModel: {},
  		leftMaterialValid: true,
  		//领料单 需要数量规则
  		rules: {
  		    required: value => !!value || '值不能为空！',
  		    counter: value => value.length <= 20 || '字符长度不能超过20!',
  				num: value => value > 0 || '值要大于0！',
  				true: value => {
  					const pattern = /^[0-9]*$/
  					return pattern.test(value) || '请输入合法数字!'
  				}
  		 }
  	}),
  
  	created() {  
			//获取单据信息
  		this.loadDataList();
			this.loadWarehouseDataList();
			this.loadZoneDataList();
  	},
		watch: {
			LOrderOptions: {
				handler() {
					this.loadDataList()
				},
				deep: true
			},
			WOrderOptions: {
				handler() {
					this.loadWarehouseDataList()
				},
				deep: true
			},
			ZOrderOptions: {
				handler() {
					this.loadZoneDataList()
				},
				deep: true
			},
		},
  	methods: {
  		//搜索
  		search() {
  			this.loadCuttingDetailList()
  		},
  		//加载库位信息
  		loadDataList() {
  			var that = this;
				that.Lloading = true;
				that.DataList = [];
  			this.$httpRequest({
  				url: `WMS/WmsBaseLocation/GetBillListByPage?pageIndex=${this.LOrderOptions.page}&pageSize=${this.LOrderOptions.itemsPerPage}`,
  				method: 'get'
  			}).then(function(response) {
  				if (response.status == 1) {
  					that.DataList = response.data.result;
						that.LOrderTotalCount = response.data.pagination.totalRecords;
						that.Lloading = false;
  				} else {
  					console.log('加载单据信息失败');
  				}
  			})
  		},
			//加载仓库信息
			loadWarehouseDataList() {
				var that = this;
				that.Wloading = true;
				that.WarehouseDataList = [];
				this.$httpRequest({
					url: `WMS/WmsBaseWarehouse/GetBillListByPage?pageIndex=${this.WOrderOptions.page}&pageSize=${this.WOrderOptions.itemsPerPage}`,
					method: 'get'
				}).then(function(response) {
					if (response.status == 1) {
						that.WarehouseDataList = response.data.result;
						that.WOrderTotalCount = response.data.pagination.totalRecords;
						that.Wloading = false;
					} else {
						console.log('加载单据信息失败');
					}
				})
			},
			//加载库区信息
			loadZoneDataList() {
				var that = this;
				that.Zloading = true;
				that.ZoneDataList = [];
				this.$httpRequest({
					url: `WMS/WmsBaseZone/GetBillListByPage?pageIndex=${this.ZOrderOptions.page}&pageSize=${this.ZOrderOptions.itemsPerPage}`,
					method: 'get'
				}).then(function(response) {
					if (response.status == 1) {
						that.ZoneDataList = response.data.result;
						that.ZOrderTotalCount = response.data.pagination.totalRecords;
						that.Zloading = false;
					} else {
						console.log('加载单据信息失败');
					}
				})
			},
  		// 打开编辑对话框
  		EditDialog(item) {
				this.DialogBill.id = item.id;
				this.DialogBill.dbid = item.dbid;
				this.DialogBill.isavailable = item.isavailable;
				this.DialogBill.created_by = item.created_by;
				this.DialogBill.created_byname = item.created_byname;
				this.DialogBill.updated_by = item.updated_by;
				this.DialogBill.updated_byname = item.updated_byname;
				this.DialogBill.company = item.company;
				this.DialogBill.created_time = item.created_time;
				this.DialogBill.updated_time = item.updated_time;
				this.DialogBill.accountingbookcode = item.accountingbookcode;
				this.DialogBill.warehouse = item.warehouse;
				this.DialogBill.zonecode = item.zonecode;
				this.DialogBill.location = item.location;
				this.DialogBill.type = item.type;
				this.DialogBill.rownum = item.rownum;
				this.DialogBill.columnum = item.columnum;
				this.DialogBill.layernum = item.layernum;
				this.DialogBill.container = item.container;
				this.DialogBill.name = item.name;
				this.DialogBill.isqty = item.isqty;
				this.DialogBill.enable = item.enable;
				this.DialogBill.qty = item.qty;
				this.DialogBill.iqty = item.iqty;
				this.DialogBill.oqty = item.oqty;
				this.DialogHeader = "编辑采购单";
				this.AddOrEditDialog = true;
  		},
			// 打开新增对话框
			AddDialog() {
				this.DialogBill.warehouse = "";
				this.DialogBill.zonecode = "";
				this.DialogBill.location = "";
				this.DialogBill.type = "";
				this.DialogBill.rownum = "";
				this.DialogBill.columnum = "";
				this.DialogBill.layernum = "";
				this.DialogBill.container = "";
				this.DialogBill.name = "";
				this.DialogBill.isqty = 0;
				this.DialogBill.enable = 1;
				this.DialogBill.qty = "";
				this.DialogBill.iqty = 0;
				this.DialogBill.oqty = 0;
				this.DialogHeader = "新增采购单";
				this.AddOrEditDialog = true;
			},
  		//提交
  		confirmOrder() {
  			var that = this;
				if(that.DialogHeader == "新增采购单")
				{
					this.$httpRequest({
						url: `/WMS/WmsBaseLocation/Add`,
						method: 'post',
						data:{					
								warehouse : that.DialogBill.warehouse,
								zonecode : that.DialogBill.zonecode,
								location : that.DialogBill.location,
								type : that.DialogBill.type,
								rownum : that.DialogBill.rownum,
								columnum : that.DialogBill.columnum,
								layernum : that.DialogBill.layernum,
								container : that.DialogBill.container,
								name : that.DialogBill.name,
								isqty : that.DialogBill.isqty,
								enable : that.DialogBill.enable,
								qty : that.DialogBill.qty,
								iqty : that.DialogBill.iqty,
								oqty : that.DialogBill.oqty,
						}
					}).then(function(response) {
					
						if (response.status == 1) {
							that.loadDataList();
							that.AddOrEditDialog = false;
						} else {
							console.log('新建信息失败');
						}
					})
				}
				else
				{
					this.$httpRequest({
						url: `/WMS/WmsBaseLocation/Update`,
						method: 'post',
						data:{		
								id : that.DialogBill.id,
								dbid : that.DialogBill.dbid,
								isavailable : that.DialogBill.isavailable,
								created_by : that.DialogBill.created_by,
								created_byname : that.DialogBill.created_byname,
								updated_by : that.DialogBill.updated_by,
								updated_byname : that.DialogBill.updated_byname,
								company : that.DialogBill.company,
								created_time : that.DialogBill.created_time,
								updated_time : that.DialogBill.updated_time,
								accountingbookcode : that.DialogBill.accountingbookcode,
								warehouse : that.DialogBill.warehouse,
								zonecode : that.DialogBill.zonecode,
								location : that.DialogBill.location,
								type : that.DialogBill.type,
								rownum : that.DialogBill.rownum,
								columnum : that.DialogBill.columnum,
								layernum : that.DialogBill.layernum,
								container : that.DialogBill.container,
								name : that.DialogBill.name,
								isqty : that.DialogBill.isqty,
								enable : that.DialogBill.enable,
								qty : that.DialogBill.qty,
								iqty : that.DialogBill.iqty,
								oqty : that.DialogBill.oqty,
						}
					}).then(function(response) {
					
						if (response.status == 1) {
							that.loadDataList();
							that.AddOrEditDialog = false;
						} else {
							console.log('编辑信息失败');
						}
					})
				}
  			
  		},
  		//取消 取消领料单
  		cancelOrder() {
  			this.AddOrEditDialog = false;
  		},
			deleteOrder(){
				var that = this;
				for(var i=0; i<that.selected.length; i++)
				{
					this.$httpRequest({
						url: `/WMS/WmsBaseLocation/Delete/${that.selected[i].id}`,
						method: 'delete'											
					}).then(function(response) {					
						if (response.status == 1) {							
							that.$message.success("删除成功！");							
						} else {
							that.$message.error("删除失败！");
						}
					})
				}
				that.loadDataList();
			},
			searchinfo(){
				var that = this;
				that.Lloading = true;
				this.$httpRequest({
					url: `WMS/WmsBaseLocation/Search?Slocation=${this.Slocation}&Scontainer=${this.Scontainer}&Srownum=${this.Srownum}&Scolumnum=${this.Scolumnum}&Slayernum=${this.Slayernum}&Senable=${this.flagselect}&Sisqty=${this.flagqty}&pageIndex=${this.LOrderOptions.page}&pageSize=${this.LOrderOptions.itemsPerPage}`,
					method: 'get'
				}).then(function(response) {
					if (response.status == 1) {
						that.DataList = response.data.result;
						that.LOrderTotalCount = response.data.pagination.totalRecords;
						that.Lloading = false;
					} else {
						console.log('加载单据信息失败');
					}
				})
			},
			searchWarehouseinfo(){
				var that = this;
				that.Wloading = true;
				this.$httpRequest({
					url: `WMS/WmsBaseWarehouse/Search?Swarehouse=${this.Wwarehouse}&Sdescription=${this.Wdescription}&Senable=${this.Wflagselect}&pageIndex=${this.WOrderOptions.page}&pageSize=${this.WOrderOptions.itemsPerPage}`,
					method: 'get'
				}).then(function(response) {
					if (response.status == 1) {
						that.WarehouseDataList = response.data.result;
						that.WOrderTotalCount = response.data.pagination.totalRecords;
						that.Wloading = false;
					} else {
						console.log('加载单据信息失败');
					}
				})
			},
			searchZoneinfo(){
				var that = this;
				that.Zloading = true;
				this.$httpRequest({
					url: `WMS/WmsBaseZone/Search?Szonecode=${this.Zzonecode}&Sdescription=${this.Zdescription}&Senable=${this.Zflagselect}&pageIndex=${this.ZOrderOptions.page}&pageSize=${this.ZOrderOptions.itemsPerPage}`,
					method: 'get'
				}).then(function(response) {
					if (response.status == 1) {
						that.ZoneDataList = response.data.result;
						that.ZOrderTotalCount = response.data.pagination.totalRecords;
						that.Zloading = false;
					} else {
						console.log('加载单据信息失败');
					}
				})
			},
			//刷新
			refreshApps(){
				this.Slocation = "";
				this.Scontainer = "";
				this.Srownum = "";
				this.Scolumnum = "";
				this.Slayernum = "";
				this.Wwarehouse = "",
				this.Wdescription = "",
				this.Zzonecode = "",
				this.Zdescription = "",
				
				
				this.flagselect = -1;
				this.flagqty = -1;
				this.Wflagselect = -1,
				this.Zflagselect = -1,
				this.selected = [];
				this.LOrderOptions.page = 1;
				this.WOrderOptions.page = 1;
				this.ZOrderOptions.page = 1;
				this.loadDataList();
				this.loadWarehouseDataList();
				this.loadZoneDataList();
			},
			
  	}
  
  }

</script>

<style>
	$select-small-chips-dense-selections-min-height{
		height:40px;
	}
</style>
